{% extends 'data_grid.html' %}
{% load i18n common %}
{% block filter_bar %}
 {% include "staff/includes/request_search_form.html" %}

  <script type="text/html" id="{{ model_name }}-delBar">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
       title="{% trans 'staff_vacation_actionDelete' %}">
      <i class="fa fa-fw fa-trash-o"></i>
    </a>
  </script>
{% endblock %}

{% block staff_button %}
  <ul class="layui-nav">
    <li class="layui-nav-item">
      <a class="layui-btn layui-btn-sm" id="id-{{ model_name }}" lay-event="staffvacationNew"
         data-type="staffvacationNew">{% trans 'staff_vacation_actionAdd' %}</a>
    </li>
  </ul>
{% endblock %}

{% block init_script %}
<script>
  $(function () {
    layui.use(['table', 'form', 'element', 'laydate', 'tablePlug'], function () {
      var fluid_container = "#{{ model_name }}_fluid";
      var tableId = "id_grid_{{ model_name }}";
      var tableElem = "#id_grid_{{ model_name }}";
      var toolbarID = "#{{ model_name|safe }}_toolbar";
      var opts = {
        id: tableId,
        elem: tableElem,
        toolbar: toolbarID,
        defaultToolbar: [],
        cellMinWidth: 80,
        smartReloadModel: true,
        height: 'full-200',
        loading: true,
        page: {
          layout: ['prev', 'page', 'next', 'limit', 'count', 'refresh', 'skip'],
          curr: 1
        },
        text: {
          none: gettext('none_data')
        },
        limits: [10, 20, 50, 80, 100, 200],
        request: {
          pageName: 'page',
          limitName: 'page_size'
        },
        done: function (res, curr, count) {
          //this.where = {};
          $.fn.trigger_action_auto("{{ model_name }}");
        },
        cols: [[
          {'field': 'id', 'fixed': 'left', 'type': 'checkbox', 'width': 30},
          {
            'field': 'emp_code', 'width': 120, 'event': "editPopUp",
            'style': "cursor: pointer; color: #57c5f7", 'title': "{% trans 'staff_leave_empCode' %}", sort:true
          },
          {'field': 'first_name', 'width': 120, 'title': "{% trans 'staff_leave_firstName' %}"},
          {'field': 'last_name', 'width': 120, 'title': "{% trans 'staff_leave_lastName' %}"},
          {'field': 'start_time', 'width': 200, 'title': "{% trans 'staff_leave_startTime' %}", sort:true},
          {'field': 'end_time', 'width': 200, 'title': "{% trans 'staff_leave_endTime' %}"},
          {
            'field': 'audit_status',
            'width': 120,
            'title': "{% trans 'staff_leave_approvalState' %}",
            templet: staff_approve_status_num_to_word
          },
          {fixed: 'right', width: 60, align: 'center', toolbar: '#{{ model_name }}-delBar'}
        ]],
        url: '/staff/api/vacationemployee/request_list/'
      };
      var table = layui.table, form = layui.form, laydate = layui.laydate, element = layui.element,
        tablePlug = layui.tablePlug;
      var date = new Date();
      var startDate = laydate.render({
        elem: '#{{ model_name }}-start',
        type: 'date',
        //value: date.getFullYear() + '-' + leftInsertZero(date.getMonth() + 1) + '-01',
        done: function (value, date) {
          endDate.config.min = {
            year: date.year
            , month: date.month - 1
            , date: date.date
          };
          $.fn.trigger_action_auto("{{ model_name }}");
        }
      });
      var endDate = laydate.render({
        elem: '#{{ model_name }}-end',
        type: 'date',
        //value: date.getFullYear() + '-' + leftInsertZero(date.getMonth() + 1) + '-' + leftInsertZero(date.getDate()),
        done: function (value, date) {
          startDate.config.max = {
            year: date.year,
            month: date.month - 1,
            date: date.date
          };
          $.fn.trigger_action_auto("{{ model_name }}");
        }
      });
      $.ajax({
        url: "/att/api/leaveVacationCategory/"
        , dataType: 'json'
        , type: "GET"
        , success: function (response) {
          var data = response.data;
          var options = '';
          data.forEach(function (item) {
            options += '<option value="' + item.id + '">' + item.category_name + '</option>';
          });
          $("#{{ model_name }}RequestCategory").html(options);
          form.render();
        }
        , error: function (XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest.status);
          }
      });
        var colIndex = {};
        opts.cols[0].forEach(function (col, index) {
            colIndex[col.field] = index;
        });
        var hidden_fields = {{ hidden_fields|safe }};
        var ordered_fields = {{ list_display|safe }};
        if (ordered_fields.length > 0) {
            var cols = [];
            ordered_fields.forEach(function (col) {
                if(col in colIndex) {
                    if(colIndex[col] !== undefined) {
                        cols.push(opts.cols[0][colIndex[col]]);
                    }
                }
            });
            opts.cols[0] = cols
            colIndex = {};
            opts.cols[0].forEach(function (col, index) {
                colIndex[col.field] = index;
            });
        }
        if (hidden_fields.length > 0) {
            opts.cols[0].forEach(function (col) {
                col.hide = false;
            });
            hidden_fields.forEach(function (col) {
                var index = colIndex[col];
                if (opts.cols[0][index] != undefined) {
                    opts.cols[0][index].hide = true;
                }
            });
        }
      var tb = table.render(opts);
      tablePlug.smartReload.enable(true);

      function show_error(response)
      {
        var res_msg = JSON.parse(response.responseText);
        var display_msg = '';
        for (var prop in res_msg) {
            display_msg += '<p>' + prop + ": " + res_msg[prop] + '</p>'
            $('form input[name="' + prop + '"]').addClass('layui-form-danger');
            $('form select[name="' + prop + '"]').addClass('layui-form-danger');
        }
        layer.alert(display_msg, {'icon': 0, btn: ['ok'], title: 'message'});
      }

      function bindAllActions() {
        $(fluid_container + " div.grid-toolbar").actions({
          container: fluid_container,
          actionContainer: fluid_container + " div.grid-toolbar",
          model: "{{model_name}}",
          table: table,
          tableId: tableId,
          form: form,
          element: element,
          curTable: tb,
          grid_opts: opts,
          column_order_url:'/column_order/',
          actions: "",
          export_url: "/staff/api/vacationemployee/export/?export_list=request",
          disabled_fields_url: "/disabled_fields/",
          init_disabled_fields: [],
          dimension: {height: "auto", width: "auto"},
          disabled_action_panel_east: ["history"],
          callback: {}
        });
        $('#id-{{ model_name }}').on('click', function () {
          $.ajax({
            url: "{% url 'biotime:staff_vacationemployee_add' %}"
            , dataType: 'html'
            , type: 'GET'
            , success: function (page) {
              layer.open({
                title: 'New'
                , btn: [gettext("btn_confirm"), gettext("btn_cancel")]
                , content: page
                , success: function (layero, index) {
                }
                , yes: function (index, layero) {
                  var newForm = layero.find("form.layui-form");
                  $(newForm).ajaxSubmit({
                    url: "/staff/api/vacationemployee/",
                    type: "POST",
                    data: $('.layui-form').serialize(),
                    dataType: "json",
                    success: function (response, status, xhr) {
                      layer.close(index);
                      layer.alert(gettext('save_successful'), {icon: 6});
                      table.reload(tableId);
                    },
                    error: function (response) {
                        show_error(response);
                    }
                  });
                }
              });
            }
          });
        });
      }

      bindAllActions();
      table.on('tool({{ model_name }})', function (obj) {
        var data = obj.data;
        if (data['audit_status'] === 2 || (data['audit_status'] === 3 && obj.event === 'editPopUp')) {
          layer.alert(gettext("Records cannot be modified by the audit."));
          return false;
        }
        if (obj.event === 'editPopUp') {

          $.ajax({
            url: "{% url 'biotime:staff_vacationemployee_add' %}"
            , dataType: 'html'
            , type: 'GET'
            , success: function (page) {
              layer.open({
                title: 'Edit',
                content: page,
                success: function (layero, index) {
                  Object.keys(data).forEach(function (key) {
                    if (data[key] != undefined) {
                      layero.find("#id_" + key).val(data[key]);
                    }
                  });
                  form.render();
                },
                btn: ['save', 'cancel'],
                yes: function (index, layero) {
                  var newForm = layero.find("form.layui-form");
                  $(newForm).ajaxSubmit({
                    url: "/staff/api/vacationemployee/" + data['id'] + "/",
                    data: data,
                    type: "PUT",
                    success: function (response, status, xhr) {
                      layer.close(index);
                      layer.alert(gettext('save_successful'), {icon: 6});
                      table.reload(tb.config.id);
                      //bindAllActions();
                    },
                    error: function (response) {
                        show_error(response);
                    }
                  });
                },
                end: function () {
                  layer.closeAll('tips');
                }
              });
            }
          });
        } else if (obj.event === 'del') {
          layer.confirm('Are you sure to delete', {
            title: gettext("btn_confirm")
            , btn: [gettext("btn_confirm"), gettext("btn_cancel")]
          }, function (index) {
            obj.del();
            layer.close(index);
            $.ajax({
              type: 'delete',
              url: '/staff/api/vacationemployee/' + data['id'] + '/',
              success: function (data) {
                layer.alert(gettext('delete_successful'), {icon: 6});
                table.reload(tb.config.id, true);
                //bindAllActions();
              }
            });
          });
        }
      });
      $('#{{ model_name }}-search_btn').on('click', function () {
        var start = $("input[name='{{ model_name }}-start']").val();
        var end = $("input[name='{{ model_name }}-end']").val();
        table.reload(tb.config.id, {
          where: {
            end_time_gte: start,
            start_time_lte: end,
            category: $('#{{ model_name }}RequestCategory').val() || null,
            audit_status: $('#{{ model_name }}-aStatus').val() || null
          }
        });
        //bindAllActions();
      });
      $('#{{ model_name }}-refresh_btn').on('click', function () {
        table.render(opts);
        bindAllActions();
      });

    });
  });
</script>
{% endblock %}